<template>
  <div class="app-container">
    <el-row>
      <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx,.csv,.xls" @change="handleClick">
      <div class="tips">
        <p>{{ textMap[type] }}设备资产批量导入</p>
        <p>id列必须存在,但可以为空,  id列若填写已有的id则数据更新覆盖,id列若不填写则数据新增一条数据(id自动生成)</p>
        <p>此次导入以下字段:</p>
        <div>
          <span v-for="i in headers" :key="i.index"> {{ i }}</span>
        </div>
      </div>
      <div class="drop">
        <el-button :loading="upLoading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">
          上传
        </el-button>
        <el-button :loading="subLoading" style="margin-left:16px;" size="mini" type="primary" @click="handleSubmit">
          提交
        </el-button>
        <el-button style="margin-left:16px;" size="mini" type="info" @click="back">
          返回
        </el-button>
        <el-col>
          <span style="font-size:12px;color:#606266;margin-left:16px">{{ filename }}</span>
        </el-col>
      </div>
    </el-row>
    <el-row>
      <div v-if="showError">
        <div class="errors">
          <template v-for="i in errormsg">
            <div :key="i.index" style="margin-top:20px;">
              <span :key="i.index" style="color:#e6a23c">第{{ i.line }}行 键值:{{ i.key }}<br></span>
              <code :key="i.index" style="color:#67c23a">{{ i.values }}<br></code>
              <code :key="i.index" style="color:#606266">异常信息:{{ i.traceback }}</code>
            </div>
          </template>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
import { importExcel } from '@/api/import'
import { importHeader } from '@/api/import'
export default {
  name: 'UploadExcel',
  data() {
    return {
      file: undefined,
      headers: [],
      type: '',
      filename: '只支持xlsx,csv格式的文件',
      errormsg: '',
      url: '',
      showError: false,
      textMap: {
        'server': '服务器',
        'network': '网路设备',
        'middleware': '中间件'
      },
      upLoading: false,
      subLoading: false,
      pageSize: 5,
      currentPage: 1
    }
  },
  created() {
    this.type = this.$route.query.type
    if (this.type == null) { this.$router.push({ path: '/dashboard' }) }
    this.getHeader()
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    getHeader() {
      const _this = this
      importHeader(this.type).then(response => {
        _this.headers = response.data
      })
    },
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    handleSubmit() {
      this.subLoading = true
      this.showError = false
      if (this.file == null) {
        this.$message.error('你需要先上传后才能提交')
        this.subLoading = false
        return false
      }
      const _this = this
      importExcel(this.file, this.type).then(response => {
        _this.subLoading = false
        _this.$notify({
          title: '导入结果',
          dangerouslyUseHTMLString: true,
          message: '导入成功,此次导入<br>' + response.count,
          type: 'success'
        })
        _this.resetForm()
      }).catch(function(error) {
        _this.subLoading = false
        _this.$notify({
          title: '导入结果',
          message: error.response.data.count,
          duration: 5000
        })
        _this.errormsg = error.response.data.error
        _this.showError = true
      })
    },
    resetForm() {
      this.errormsg = ''
      this.$refs['excel-upload-input'].value = null
    },
    handleUpload() {
      this.upLoading = true
      this.$refs['excel-upload-input'].click()
    },
    handleClick(e) {
      const files = e.target.files
      const rawFile = files[0] // only use files[0]
      if (!rawFile) return
      this.file = rawFile
      this.filename = rawFile.name
      this.upLoading = false
    }
  }
}
</script>
<style scoped>
.tips{
  padding: 8px 16px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 20px 0;
}
.tips p{
  font-size: 12px;
    color: #5e6d82;
    line-height: 1.5em;
}
.tips span{
  font-size: 14px;
    color: #50bfff;
    line-height: 1.5em;
    margin-left:5px;
}
.errors{
    background:#f4f4f5;
    padding: 8px 24px;
    margin-bottom: 20px;
    border-radius: 2px;
    display: block;
    line-height: 20px;
    font-size: 12px;
    height:300px;
    overflow:scroll;
}
.errors span{
    margin-left:5px;
}
.excel-upload-input{
  display: none;
  z-index: -9999;
}

</style>
